{{--@extends('admin::layouts.content')--}}

{{--@section('content')--}}
    <div class="cards" style="width: auto;">
        <div class="card-header">
            <div class="d-flex justify-content-between">
{{--                <h5>「{{ $current->name }}团队</h5>--}}
                <h5>团队总拼单数：{{ $current->total }}</h5>
            </div>
        </div>

        <div class="card-body"  style="width: auto;">
            <div class="org-tree">
                <ul class="tree-root">

                    @foreach($tree as $node)
                        @include('node', [
                            'node'  => $node,
                            'level' => 0
                        ])
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    <style>
        .org-tree {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
            line-height: 1.8;
        }

        .tree-root {
            padding-left: 0;
        }

        .tree-node {
            position: relative;
            list-style: none;
            padding-left: 30px;
            margin: 5px 0;
        }

        .node-content {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            transition: all 0.2s;
            width:30rem;
        }

        .node-content:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }

        .toggle-icon {
            cursor: pointer;
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        .load-more {
            color: #6c757d;
            cursor: pointer;
            padding-left: 20px;
        }

        .loading::after {
            content: " ";
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid #ccc;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>

    <script>
        function expandAll() {
            $('.tree-node ul').show();
            $('.toggle-icon').html('▼');
        }

        function collapseAll() {
            $('.tree-node ul').hide();
            $('.toggle-icon').html('▶');
        }

        Dcat.ready(function () {

            $('.tree-node').each(function () {
                const $node = $(this);
                const $children = $node.children('ul');

                if ($children.length > 0) {
                    const $toggle = $node.find('.toggle-icon');
                    $toggle.html('▼');
                    $toggle.off('click.dynamic').on('click.dynamic', function(v) {
                        $children.toggle();
                        $(this).html($children.is(':visible') ? '▼' : '▶');
                        v.stopPropagation();
                    });

                }
            });
        });
    </script>
{{--@endsection--}}
